<template>
  <div>
    <Echart
      :options="options"
      id="centreLeft1Chart"
      height="260px"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data() {
    return {
      options: {},
      colorList: { // 颜色配置不变
        linearYtoG: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: '#f5b44d' }, { offset: 1, color: '#28f8de' }] },
        linearGtoB: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#43dfa2' }, { offset: 1, color: '#28f8de' }] },
        linearBtoG: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#1c98e8' }, { offset: 1, color: '#28f8de' }] },
        areaBtoG: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(35,184,210,.2)' }, { offset: 1, color: 'rgba(35,184,210,0)' }] }
      }
    }
  },
  components: { Echart },
  props: { cdata: { type: Object, default: () => ({}) } },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          title: {
            text: '省市风险值对比', // 新增：图表主标题
            textStyle: { color: '#D3D6DD', fontSize: 16, fontWeight: 'bold' },
            top: 20, // 调整标题位置（避免与图例重叠）
            left: 'center' // 标题居中
          },
          tooltip: {
            trigger: 'item',
            // 优化tooltip：显示“省份名称+风险值+风险等级”
            formatter: (params) => {
              // 从pickedProvinces中匹配当前省份的风险等级
              const province = newData.pickedProvinces.find(item => item.name === params.name);
              return `
                <div style="text-align: left;">
                  <div>省份：${params.name}</div>
                  <div>风险值：${params.value.toFixed(3)}</div>
                  <div>风险等级：${province?.riskLevel || '未知'}</div>
                </div>
              `;
            },
            backgroundColor: 'rgba(0,0,0,0.7)',
            textStyle: { color: '#fff' },
            padding: 10
          },
          grid: { left: 40, right: 40, bottom: 60, top: '30%' }, // 调整网格（适配标题）
          xAxis: {
            type: 'category',
            position: 'bottom',
            axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } }, // 增加X轴线可见性
            axisLabel: {
              color: 'rgba(255,255,255,.8)',
              fontSize: 12,
            },
            data: newData.weekCategory // X轴：随机7个省份名称
          },
          yAxis: {
            name: '风险度',
            nameLocation: 'end',
            nameGap: 24,
            nameTextStyle: { color: 'rgba(255,255,255,.5)', fontSize: 14 },
            max: newData.maxData, // 固定为1
            splitNumber: 5, // 拆分5段（0-0.2-0.4-0.6-0.8-1.0），更清晰
            axisLine: { lineStyle: { opacity: 0 } },
            splitLine: { lineStyle: { color: '#fff', opacity: 0.1 } },
            axisLabel: {
              color: 'rgba(255,255,255,.8)',
              fontSize: 12,
              formatter: (value) => value.toFixed(1) // Y轴标签保留1位小数（如0.2、0.4）
            }
          },
          series: [
            {
              name: '省份风险值', // 与图例名称一致
              type: 'line',
              smooth: true,
              symbol: 'circle', // 实心圆点（更醒目）
              symbolSize: 6,
              itemStyle: { normal: { color: '#28f8de' } }, // 节点颜色：青色
              lineStyle: { normal: { color: this.colorList.linearBtoG, width: 2 } },
              areaStyle: { normal: { color: this.colorList.areaBtoG } },
              data: newData.weekLineData, // Y轴：7个省份的风险值
              tooltip: { trigger: 'item' }
            },
            {
              name: '占位背景',
              type: 'bar',
              itemStyle: { normal: { show: true, color: '#000', opacity: 0 } },
              silent: true,
              barWidth: '60%',
              data: newData.weekMaxData,
              animation: false
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
